<template>
  <div
    v-if="detailData"
    class="base-info-view"
  >
    <el-form
      class="form-detail"
      label-position="right"
      label-width="140px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="回款类型："
          style="width: 50%"
        >
          <div>{{ getLabel('returned_money_type', detailData.returnType) }}</div>
        </el-form-item>
        <el-form-item
          :label="detailData.returnType==='1'?'回款配送商名称：':'直接回款方名称：'"
          style="width: 50%"
        >
          <div>{{ detailData.relationName }}</div>
        </el-form-item>
        <el-form-item
          label="付款开户行："
          style="width: 50%"
        >
          <div>{{ detailData.bankName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="付款银行账号："
          style="width: 50%"
        >
          <div>{{ detailData.bankNumber || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="回款金额："
          style="width: 50%"
        >
          <div>{{ moneyFormat(detailData.returnAmount) }}</div>
        </el-form-item>
        <el-form-item
          label="到款日期："
          style="width: 50%"
        >
          <div v-if="detailData.returnTime">{{ dateFormat('yyyy-mm-dd', detailData.returnTime) }}</div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="关联回款客户类型："
          style="width: 50%"
        >
          <div>{{ getLabel('returned_money_customer_type', detailData.customerType) }}</div>
        </el-form-item>
        <el-form-item
          :label="detailData.customerTitle"
          style="width: 50%"
        >
          <div>{{ detailData.customerName }}</div>
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 50%"
        >
          <div>{{ detailData.creatorName }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 50%"
        >
          <div>{{ dateFormat("yyyy-mm-dd HH:MM", detailData.createdAt) }}</div>
        </el-form-item>
        <el-form-item
          label="记账时间："
          style="width: 50%"
        >
          <div>{{ dateFormat("yyyy-mm-dd HH:MM", detailData.recordTime) }}</div>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var detail = reactive({
      detailData: props.detailData,
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          var obj = newval
          if (obj.customerType === 'agent') {
            obj.customerTitle = '回款代理商名称：'
          } else if (obj.customerType === 'agent_person') {
            obj.customerTitle = '回款兼职名称：'
          } else if (obj.customerType === 'terminal') {
            obj.customerTitle = '回款终端名称：'
          }
          detail.detailData = newval
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(detail),
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
